import React,{useRef ,useState, useEffect} from 'react'
import { useNavigate } from 'react-router'
import axios from 'axios'
import './index.css'
import phone1 from '../../../../static/img/Search and Particulars/phone1c.png'
import phone2 from '../../../../static/img/Search and Particulars/phone2.png'
import phone3 from '../../../../static/img/Search and Particulars/phone3.png'
import codeimg from '../../../../static/img/Search and Particulars/yzm.png'
import { message } from 'antd';

export default function Phone1() {
    //初始化第一次手机号
    const phon1 = useRef()
//从后台接受个人资料
const [count,setcout] = useState({})
  useEffect(() => {
    axios.post('http://localhost:3001/mycenter/personald', { id: 1 }).then((res) => {
            console.log(res.data);
            setcout(res.data)
        })
  }, [])
    const natitate = useNavigate()
    function nowsubmit() {
        const phone = phon1.current.value
        console.log(phone);
        if (phone===count.u_phone) {
        natitate('/mycenter/changephone2')
           
        }else{
            message.warning("手机号输入错误!!")
        }
        
    }
    return (
        <div>
            <h3 className='tt'>换绑手机</h3>
            <div className="C-middle ">
                <div className="phone1">
                    <img src={phone1} alt="" />
                </div>
                <div className="phone2">
                    <img src={phone2} alt="" />
                </div>
                <div className="phone3">
                    <img src={phone3} alt="" />
                </div>
                <input type="text" ref={phon1} className='changephone' placeholder='请输入新手机号' />
                <input type="text" className='verification-code' placeholder='验证码' />
                <div className="codeimg">
                    <img src={codeimg} alt="" />&nbsp;&nbsp;&nbsp;
                    <span>看不清换一张</span>
                </div>
                <div className="phonecode">
                    <input className='phonecodeis' type="text" placeholder='手机验证码' />
                    <div className="clickcode">获取验证码</div>
                </div>
                <div className="c-submit" onClick={nowsubmit}>提交验证</div>
            </div>

        </div>
    )
}
